<template>
<!-- 组件容器 -->
  <el-card class="box-card">
    <!-- 卡片顶部 -->
    <div slot="header" class="clearfix">
      <!-- 添加点击事件 -->
      <el-button @click="addMenu">添加菜单</el-button>
    </div>
    <!-- 表格组件，绑定数据 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        prop="date"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="菜单名称">
      </el-table-column>
      <el-table-column
        prop="level"
        label="菜单级数">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="前端图标">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="date"
        label="操作"
        width="180">
        <!-- 使用自定义列模版设置两个操作按钮，内部可以使用scope访问到相关数据 -->
        <template slot-scope="scope">
          <!-- 使用scope.row.id获取这一行的id数据 -->
          <el-button
            size="mini"
            @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
// 引入接口文件
import { getAll, deleteMenu } from '@/services/menu'
export default {
  name: 'mymenu',
  data () {
    return {
      // 列表数据
      tableData: []
    }
  },
  // 钩子函数
  created () {
    // 在实例创建完后获取全部菜单数据
    this.getAllMenu()
  },
  methods: {
    // 用于跳转到菜单添加路由
    addMenu () {
      this.$router.push({
        name: 'addMenu'
      })
    },
    // 用于获取全部菜单数据
    async getAllMenu () {
      // 获取数据
      const { data } = await getAll()
      // 判断是否获取成功
      if (data.code === '000000') {
        // - 将获取的数据传递给列表
        this.tableData = data.data
      } else {
        // - 数据获取失败主动弹出提示
        this.$message.error('菜单数据获取失败')
      }
    },
    // 编辑按钮点击事件函数
    handleEdit (id) {
      // 跳转，并且带着id
      this.$router.push(`/editMenu/${id}`)
    },
    // 删除按钮点击事件函数
    handleDelete (id) {
      // 设置弹框，用于二次确认
      this.$confirm('此操作将永久删除该条菜单数据, 是否继续?', '删除菜单', {
        // 使用async
      }).then(async () => {
        // 调用接口删除菜单
        const { data } = await deleteMenu(id)
        // 判断是否删除成功
        if (data.code === '000000') {
          // - 删除成功更新数据
          this.getAllMenu()
          // - 弹出提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          // 删除失败弹出提示
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        }
      }).catch(() => {
        // 取消删除弹出提示
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
